<template>
    <div class="icons">
      <swiper :options="SwiperOptions">
         <swiper-slide v-for="(page, index) of pages" :key="index">
            <div class="icon-item" v-for="item in page" :key="item.id">
               <div class="item-content-img">
                 <img :src="item.imgUrl" class="icon-img"/>
               </div>
               <div class="item-text">{{item.desc}}</div>
            </div>
         </swiper-slide> 
      </swiper> 
    </div>
</template>

<script scoped>
    export default {
        name:'HomeIcons',
        props:{
          list:Array
        },
        data () {
          return {
            SwiperOptions: {
               autoplay:false,
               loop:false,
            },
            
          }  
        },
        computed: {
            pages() {
                const pages = []
                this.list.forEach((item, index)=> {
                   const page=Math.floor(index / 8);
                   if(!pages[page]){
                      pages[page] = []
                   }
                   pages[page].push(item);
                })
                return pages
            }
        }
    }
</script>

<style lang="stylus" scoped>
   @import '~styles/varibles.styl'
   @import '~styles/mixins.styl'
   .icons >>> .swiper-container
     width:100%;
     height:0;
     padding-bottom:50%;
   .icons
     margin-top:.1rem;
     .icon-item
       position:relative;
       float:left;
       overflow:hidden;
       width:25%;
       height:0;
       padding-bottom:25%;
     
       .item-content-img
         position:absolute;
         top:0;left:0;right:0;
         overflow:hidden;
         box-sizing:border-box;
         padding:.1rem;
         bottom:.44rem;
         .icon-img
            height:100%;
       .item-text
         position:absolute;
         left:0;right:0;
         bottom:0;
         text-align:center;
         line-height:.44rem;
         color:$TabTextcolor;
         ellipsis()
</style>